div
div1
div2
div3
div4
div5
div6
Powrót do głównej strony


Kod w html:

</head>
<body style="background-color: rgba(117, 122, 122, 0.938);">
<div class="grid-kontener">
<div class="div">div</div>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>

kod w css



.grid-kontener{
display: grid;
grid-template-columns: 40vh 20vh 40vh;
grid-template-rows: 10vh 8vh 8vh 8vh 8vh 8vh 8vh;
text-align: center;
margin: auto;
margin-top: 40px;
}
.div{
background-color: azure;
grid-column: 1/4;
border: 1px solid red;
}
.div1{
background-color: chartreuse;
grid-row: 2/8;
border: 1px solid red;
}
.div2{
background-color: aqua;
grid-column: 2/3;
grid-row: 2/5;
border: 1px solid red;
}
.div3{
background-color: brown;
grid-row: 2/4;
border: 1px solid red;
}
.div4{
background-color: rgb(30, 219, 30);
grid-column: 2/3;
grid-row: 5/8 ;
border: 1px solid red;
}
.div5{
background-color:salmon;
border: 1px solid red;
grid-row: 4/6;
}
.div6{
background-color: cornflowerblue;
border: 1px solid red;
grid-row: 6/8;
}